<template>
  <div>
    <div class="header-abs">
       <router-link
        to="/"
        class="iconfont back"
        tag="div"
        v-if="isShow"
      >
        &#xe6b4;
      </router-link>
    </div>
    <div class="header-fixed" v-if="!isShow" :style="opacityNum">
      <router-link to="/">
        <div class="header-left">
          <div class="iconfont header-icon">&#xe6b4;</div>
        </div>
      </router-link>
      <div class="header-title">详情页</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      isShow: true,
      timer: null,
      opacityNum: {
        opacity: 0
      }
    }
  },
  methods: {
    handlerScrollShow () {
      const top = document.documentElement.scrollTop || document.body.scrollTop
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        console.log(100)
        if (top && top > 60) {
          this.opacityNum.opacity = top / 140
          const num = this.opacityNum.opacity
          this.opacityNum.opacity = num > 1 ? 1 : num
          this.isShow = false
        } else {
          this.isShow = true
        }
        this.timer = null
      }, 100)
    }
  },
  created () {
    window.addEventListener('scroll', this.handlerScrollShow)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handlerScrollShow)
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/variable.styl'
  .back
    width 70px
    text-align center
    line-height 70px
    color #ffffff
    font-size 40px
    position absolute
    top 20px
    left 20px
    background-color rgba(0,0,0,0.7)
    border-radius 50%
    z-index 2
  .header-fixed
    height $headerHeight
    background-color $bgColor
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    z-index 2
    .header-left
      width 64px
      line-height $headerHeight
      text-align center
      color #fff
      position absolute
      top 50%
      left 10px
      transform translateY(-50%)
      .header-icon
        vertical-align middle
        color #fff
        height 100%
        font-size 24px
        width 100%
    .header-title
      position absolute
      top 50%
      left 50%
      font-size 30px
      transform translate(-50%,-50%)
      color #ffffff
</style>
